<template>
  <view class="easyCLearSnowPack">

    <child-header-bar :childTitle="childTitle" @getMarginTop="getMarginTop"></child-header-bar>
    <view class="easyClearSnowPack-content" :style="[{'top': top + 'px'}]">

      <view class="ec-content">
        <view class="hotel-box">
          <view class="hotel-item" @click="toStoreIntro(item)" v-for="(item,index) in othersList" :key="index">
            <!-- 是否自营 -->
            <view class="is-self-employed" v-if="item.roleFlag == 'snow_filed_child'">
              <image src="/myPackageA/static/easyClear/self.png" mode=""></image>
              <view class="ise-title">
                自营
              </view>
            </view>
            <view class="ht-img">
              <image :src="item.bussinessImg" mode=""></image>
              <view class="hi-distance">
                距离滑雪场{{item.distanceOf ? item.distanceOf : 0}}公里
              </view>
            </view>
            <view class="hi-content">
              <view class="hi-name">
                {{item.bussinessName}}
              </view>
   <view style="display: flex;flex-wrap: wrap" class="hi-label" >
   <view class="label-item" v-if="item.tag.length > 0" v-for="(item1,index) in item.tag" :key="index">
     {{item1}}
   </view>
   <!-- 
   <view class="hi-label" v-if="item.childTag.length > 0" style="margin-left: 20rpx;">
     <view class="label-item" v-for="(item1,index1) in item.childTag" :key="index1">
       {{item1}}
     </view>
   </view>
   -->
   </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        top: 0,
        childTitle: '一单成商家列表',
        selectParam: {},
        othersList: [],
        pageType: ''
      }
    },
    onLoad(options) {
      if (options.type) {
        this.pageType = options.type
      }
      if (options.param) {
        this.selectParam = JSON.parse(options.param)
		console.log( this.selectParam)
      }
      this.getBusinessList()
    },
    methods: {
		onShareAppMessage() {
		return {
		    title: '一单成商家列表',
		    imageUrl: this.img,
		  }
		},
		onShareTimeline() {
		  return {
		    title: '一单成商家列表',
		    imageUrl: this.img,
		  }
		},
      getBusinessList() {
        let _this = this
        wx.request({
          url: _this.$httpApi.install.orderSuccess,
          method: 'POST',
          data: _this.selectParam,
          success(res) {
            console.log(res)
            if (_this.pageType == 'hotel') {
              _this.othersList = res.data.data.bussinessStayList
            } else if (_this.pageType == 'food') {
              _this.othersList = res.data.data.bussinessFoodList
            } else if (_this.pageType == 'traval') {
               _this.othersList = res.data.data.travelModalList
            }
            _this.getTag(_this.othersList)

          },
        })
      },
      // 获取酒店标签
      getTag(list) {
        console.log(list)
        if (list.length > 0) {
          list.forEach(item => {
            if (item.tag !== null) {
              item.tag = item.tag.split(',')
              item.childTag = item.tag.slice(1)
            } else {
              item.tag = []
              item.childTag = []
            }
          })
        }
      },
      // 动态接收导航栏高度
      getMarginTop(marginTop) {
        this.top = marginTop ? marginTop : 150
      },
      toStoreIntro(item) {
        uni.navigateTo({
          url: '/myPackageA/pages/storeIntro/storeIntro?businessId=' + item.bussinessId
        })
      },
    }
  }
</script>

<style>
  page {
    width: 100%;
    height: 100%;
    background-color: #F8FAFE;
  }
</style>
<style lang="scss" >
  .easyClearSnowPack-content {
    width: 100%;
    position: absolute;

    .ec-content {
      padding: 0 30rpx;
      margin-top: 20rpx;

      .hotel-box {

        display: flex;
        justify-content: space-between;
       // flex-wrap: wrap;

        .hotel-item {
          background: #FFFFFF;
          padding-bottom: 30rpx;
          margin-bottom: 20rpx;
          border-radius: 20rpx;
          position: relative;
		 width: 334rpx;
          .is-self-employed {
            position: absolute;
            z-index: 99;
            right: 0;
            top: 0;
            width: 105rpx;
            height: 35rpx;
            background: linear-gradient(270deg, #FF3434 0%, #FFA163 100%);
            border-radius: 0rpx 19rpx 0rpx 19rpx;
            display: flex;
            align-items: center;
            justify-content: center;

            image {
              width: 24rpx;
              height: 24rpx;

            }

            .ise-title {
              font-size: 22rpx;
              font-family: Source Han Sans CN, Source Han Sans CN;
              font-weight: 400;
              color: #FFFFFF;
            }
          }

          .ht-img {
            width: 335rpx;
            height: 377rpx;
            background: #D6D6D6;
            border-radius: 20rpx 20rpx 0rpx 0rpx;
            position: relative;

            image {
              width: 100%;
              height: 100%;
              border-radius: 20rpx 20rpx 0rpx 0rpx;
            }

            .hi-distance {
              position: absolute;
              bottom: 10rpx;
              left: 10rpx;
              padding: 5rpx 17rpx;
              background: #303030;
              border-radius: 18rpx 18rpx 18rpx 18rpx;

              font-size: 24rpx;
              color: #88F79C;
            }
          }

          .hi-content {
            padding-left: 16rpx;

            .hi-name {
              font-size: 24rpx;
              font-weight: bold;
              margin-top: 10rpx;
              color: #464646;
            }

            .hi-grade {
              margin-top: 10rpx;
              width: 78rpx;
              height: 30rpx;
              // padding: 4rpx 12rpx;
              background: #EFF1F4;
              border-radius: 18rpx 18rpx 18rpx 18rpx;
              font-size: 20rpx;
              color: #FF4E00;
              display: flex;
              align-items: center;
              justify-content: center;
            }

            .hi-label {
              display: flex;
              margin-top: 10rpx;

              .label-item {
                background: #EFF1F4;
                border-radius: 18rpx 18rpx 18rpx 18rpx;
                font-size: 20rpx;
                font-family: Source Han Sans CN, Source Han Sans CN;
                font-weight: 400;
                color: #91A4B2;
                padding: 4rpx 16rpx;
                margin-right: 10rpx;
              }
            }
          }
        }
      }
    }

  }
</style>